<template>
    <footer>
        <div class="foot"></div>
        <div class="footer">
            <ul>
                <li>
                    <router-link to="/" exact class="footTab">
                        <i class="iconfont">&#xe67b;</i>
                        <span>首页</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/club" exact class="footTab">
                        <i class="iconfont">&#xe67a;</i>
                        <span>社区</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/shopChart" exact class="footTab">
                        <i class="iconfont">&#xe64c;</i>
                        <span>购物车</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/my" exact class="footTab">
                        <i class="iconfont">&#xe658;</i>
                        <span>我的</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </footer>
</template>

<script>
    export default {
        name: "Footer",
        props:['type'],
        mounted () {
            document.getElementsByClassName('footTab')[this.type].style.color="#FF4C50";
        }
    }

</script>

<style scoped lang="scss">
footer {
    width: 100%;
    .foot {
        position: relative;
        width: 100%;
        height: 3.125rem;
        max-width: 51.875rem;
        margin: 0 auto;
    }
    .footer {
        position: fixed;
        bottom: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        height: 3.125rem;
        background: #fff;
        display: flex;
        max-width: 51.875rem;
        margin: 0 auto;
        ul {
            display:flex;
            flex-grow: 1;
            li {
                flex-grow: 1;
                a {
                    height: 100%;
                    color: #fff;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    color: #666;
                    > .iconfont {
                        font-size: 24px;

                    }
                    span {
                        font-size: 10px;
                    }
                }
            }
        }
    }
}
.iconfont{
    line-height: 1em;
}
</style>
